<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Book Store</title>
<link rel="stylesheet" type="text/css" href="${path }/style/style.css" />
	<link rel="stylesheet" href="${path }/style/lightbox.css" type="text/css" media="screen" />
	
	<script src="${path }/js/prototype.js" type="text/javascript"></script>
	<script src="${path }/js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="${path }/js/lightbox.js" type="text/javascript"></script>
    <script type="text/javascript" src="${path }/js/java.js"></script>
    
    <script>
		function detailsBook(id){
			window.location = '${path }/book/detailBook?bookId='+id;
		}
		
		//参数id,是要添加的商品ID
		function addCart(id){
			var xmlHttp = new XMLHttpRequest();
			var url = "${path}/cart/addCart?bookId="+id;
			xmlHttp.open("get",url,true);
			xmlHttp.send();
			
			xmlHttp.onreadystatechange = function(){
				if(xmlHttp.status == 200){
					if(xmlHttp.readyState == 4){
						//请求成功，接收返回的数据：格式:成功标志 0或1 ：购物车商品数量：购物车中总价格
						var str = xmlHttp.responseText;
						var arr = str.split(":");
						if(arr[0] == '1'){
							document.getElementById("itemCount").innerHTML=arr[1];
							document.getElementById("allPrice").innerHTML = arr[2];
							alert("添加成功");
						}else {
							alert("添加购物车失败");
						}
						
						//alert(str);
					}
				}
				
			}
		}
	</script>
</head>
<body>
<div id="wrap">

      <%@ include file="../common/header.jsp" %>
       
       
       <div class="center_content">
       	<div class="left_content">
        	<div class="crumb_nav">
            <a href="${path }/book/IndexAction">首页</a> &gt;&gt; ${book.bookName }
            </div>
            <div class="title"><span class="title_icon"><img src="${path }/images/bullet1.gif" alt="" title="" /></span>${book.bookName }</div>
        
        	<div class="feat_prod_box_details">
            
            	<div class="prod_img"><a href="javascript:void(0)"><img src="${path }/images/${book.imgUrl }" style="width:98px;height:150px;" alt="" title="" border="0" /></a>
                <br /><br />
                <a href="${path }/images/${book.imgUrl }" rel="lightbox"><img src="${path }/images/zoom.gif" alt="" title="" border="0" /></a>
                </div>
                
                <div class="prod_det_box">
                	<div class="box_top"></div>
                    <div class="box_center">
                    <div class="prod_title">图书名称:&nbsp;&nbsp;${book.bookName }</div>
                    <p class="details">作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者：${book.author }</p>
                    <p class="details">出&nbsp;&nbsp;版&nbsp;&nbsp;社：${book.publish }</p>
                    <p class="details">出版日期：<fmt:formatDate value="${book.publishDate }" pattern="yyyy-MM-dd" ></fmt:formatDate></p>
                 
                   
                    <div class="price"><strong>价格:</strong> <span class="red">${book.price } $</span></div>
                   <!-- <div class="price"><strong>COLORS:</strong> 
                    <span class="colors"><img src="images/color1.gif" alt="" title="" border="0" /></span>
                    <span class="colors"><img src="images/color2.gif" alt="" title="" border="0" /></span>
                    <span class="colors"><img src="images/color3.gif" alt="" title="" border="0" /></span>                    
                    </div>
                    -->
                    <a href="javascript:void(0)" class="more"><img src="${path }/images/order_now.gif" onclick="addCart('${book.bookId }')" alt="" title="" border="0" /></a>
                    <div class="clear"></div>
                    </div>
                    
                    <div class="box_bottom"></div>
                </div>    
            <div class="clear"></div>
            </div>	
            
              
            <div id="demo" class="demolayout">

                <ul id="demo-nav" class="demolayout">
                <li><a class="active" href="#tab1">更多信息</a></li>
                <li><a class="" href="#tab2">相关图书</a></li>
                </ul>
    
            <div class="tabs-container">
            
                    <div style="display: block;" class="tab" id="tab1">
                                        <p class="more_details">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                                        </p>
                            <ul class="list">
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>                                          
                            </ul>
                                         <p class="more_details">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                                        </p>                           
                    </div>	
                    
                            <div style="display: none;" class="tab" id="tab2">
                    <div class="new_prod_box">
                        <a href="javascript:void(0)">product name</a>
                        <div class="new_prod_bg">
                        <a href="javascript:void(0)"><img src="${path }/images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>
                        </div>           
                    </div>
                    
                    <div class="new_prod_box">
                        <a href="javascript:void(0)">product name</a>
                        <div class="new_prod_bg">
                        <a href="javascript:void(0)"><img src="${path }/images/thumb2.gif" alt="" title="" class="thumb" border="0" /></a>
                        </div>           
                    </div>                    
                    
                    <div class="new_prod_box">
                        <a href="javascript:void(0)">product name</a>
                        <div class="new_prod_bg">
                        <a href="javascript:void(0)"><img src="${path }/images/thumb3.gif" alt="" title="" class="thumb" border="0" /></a>
                        </div>           
                    </div>    

                    <div class="new_prod_box">
                        <a href="javascript:void(0)">product name</a>
                        <div class="new_prod_bg">
                        <a href="javascript:void(0)"><img src="${path }/images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>
                        </div>           
                    </div>
                    
                    <div class="new_prod_box">
                        <a href="javascript:void(0)">product name</a>
                        <div class="new_prod_bg">
                        <a href="javascript:void(0)"><img src="${path }/images/thumb2.gif" alt="" title="" class="thumb" border="0" /></a>
                        </div>           
                    </div>                    
                    
                    <div class="new_prod_box">
                        <a href="javascript:void(0)">product name</a>
                        <div class="new_prod_bg">
                        <a href="javascript:void(0)"><img src="${path }/images/thumb3.gif" alt="" title="" class="thumb" border="0" /></a>
                        </div>           
                    </div>  


                   
                    <div class="clear"></div>
                            </div>	
            
            </div>


			</div>
            

            
        <div class="clear"></div>
        </div><!--end of left content-->
        
        <div class="right_content">
        
                	<div class="languages_box">
            <span class="red">Languages:</span>
            <a href="#"><img src="${path }/images/gb.gif" alt="" title="" border="0" /></a>
            <a href="#"><img src="${path }/images/fr.gif" alt="" title="" border="0" /></a>
            <a href="#"><img src="${path }/images/de.gif" alt="" title="" border="0" /></a>
            </div>
                <div class="currency">
                <span class="red">Currency: </span>
                <a href="#">GBP</a>
                <a href="#">EUR</a>
                <a href="#"><strong>USD</strong></a>
                </div>
                
                
              <div class="cart">
                  <div class="title"><span class="title_icon"><img src="${path }/images/cart.gif" alt="" title="" /></span>我的购物车</div>
                  <div class="home_cart_content">
                  <span id="itemCount">${cart.allcount }</span>个商品 | <span class="red">总价: <span id="allPrice">${cart.allPrice }</span>$</span>
                  </div>
                  <a href="${path }/jsp/cart/cart.jsp" class="view_cart">查看购物车</a>
              </div>
        
             <div class="title"><span class="title_icon"><img src="${path }/images/bullet3.gif" alt="" title="" /></span>关于我们店</div> 
             <div class="about">
             <p>
             <img src="${path}/images/about.gif" alt="" title="" class="right" />
             本书店是天创集团旗下的天智教育经营的书店，开业十年来，一直与国内外五百家出版社，近千家发行单位保持着良好的合作关系。以其集文化传播、艺术鉴赏、休闲为一体的崭新经营方式、一流的购书环境及优质的服务，赢得了众多的荣誉，成为华东地区最大的集图书、音像制品、文化用品、快餐、软件开发、广告策划于一体的图书零售企业。
             </p>
             
             </div>
             
             <div class="right_box">
             
             	<div class="title"><span class="title_icon"><img src="${path }/images/bullet4.gif" alt="" title="" /></span>推荐图书</div> 
                    <c:forEach var="t" items="${tuijianBook.books }">
			           <div class="new_prod_box">
			               <a href="javascript:void(0)" onclick="detailsBook('${t.bookId}')">${t.bookName }</a>
			               <div class="new_prod_bg">
			               <span class="new_icon"><img src="${path }/images/promo_icon.gif" alt="" title="" /></span>
			               <a href="javascript:void(0)" onclick="detailsBook('${t.bookId}')"><img  src="${path }/images/${t.imgUrl }" style="width:60px;height:90px" alt="" title="" class="thumb" border="0" /></a>
			               </div>           
			           </div>
			        </c:forEach>  
             </div>
             
             
             
             <div class="right_box">
             
             	<div class="title"><span class="title_icon"><img src="${path }/images/bullet5.gif" alt="" title="" /></span>图书分类</div> 
                
                <ul class="list">
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>                                              
                </ul>
                
             	<div class="title"><span class="title_icon"><img src="${path }/images/bullet6.gif" alt="" title="" /></span>合作伙伴</div> 
                
                <ul class="list">
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>                              
                </ul>      
             
             </div>         
             
        
        </div><!--end of right content-->
        
        
       
       
       <div class="clear"></div>
       </div><!--end of center content-->
       
              
   <!-- 网站尾部 -->            
  <%@ include file="../common/foot.jsp" %>
  <!-- 网站尾部 -->   
    

</div>

</body>
<script type="text/javascript">

var tabber1 = new Yetii({
id: 'demo'
});

</script>
</html>